@import 'variable.scss';

.header {
	min-width: 1200px;
	height: 72px;
	box-shadow: 0 5px 5px #ddd;
	background-color: #fff;

  .header-logo {
     	display: inline-block;
		width: 288px;
		height: 72px;
		padding: 8px;
		
		.logo-lk {
			display: block;
			height: 100%;
			background-image: url(../img/logo.png);
			background-repeat: no-repeat;
		    background-size: 224px 56px;
		}
	}

	.header-nav {
		display: inline-block;

		.nav-list {
			.nav-item {
				float: left;
				height: 72px;
				padding-left: 70px;
				line-height: 72px;
				font-size: 18px;

				.nav-lk {
					position: relative;
					transition: color .3s;

					&::after {
						position: absolute;
						left: 0;
						bottom: -8px;
						content: "";
						display: block;
						width: 0;
						height: 2px;
						background-color: $defaultColor;
						transition: width .3s;
					}

					&:hover {
						color: $defaultColor;

						&::after {
							width: 100%;
						}
					}
				}
			}
		}
	}

	.header-search {
		float: right;
		position: relative;
		width: 240px;
		height: 40px;
		margin: 16px 15px 0 0;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		overflow: hidden;
    
		.input-search {
			position: absolute;
			top: 0;
			left: 0;
			width: 200px;
			height: 40px;
			text-indent: 10px;
			border-top-left-radius: 8px;
			border-bottom-left-radius: 8px;
		}

		.btn-search {
			position: absolute;
			top: 0;
			right: 0;
			width: 40px;
			height: 40px;
		}
	}
}





